let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let webpack = require('webpack');

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index.js',
        jquery: 'jquery'
    },
    output: {
        filename: '[name].js',
        path: path.resolve('dist')
    },
    devtool: 'source-map',
    devServer: {
        contentBase: 'dist',
    },
    externals: {
        // 打包时排除掉jquery
        'jquery': '$'
    },
    module: {
        rules: [
            // {
            //     // 有一个模块引入jQ,那么就把$挂到全局上
            //     // 只有引入jQ的模块打包了jQ
            //     test: require.resolve('jquery'),
            //     use: 'expose-loader?$'
            // },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        // 要再生产环境下安装@babel/runtime
                        // 实例上的es6语法要安装@babel/polyfill才可以 例如 'aa'.includes('aa')
                        plugins: [
                            // 转化js运行时的api方法
                            // 优化js代码
                            // 抽离公告部分
                            '@babel/plugin-transform-runtime',
                            // 扩展class
                            '@babel/plugin-proposal-class-properties',
                            // 扩展装饰器
                            ['@babel/plugin-proposal-decorators', { "legacy": true }],
                            // 扩展import
                            '@babel/plugin-syntax-dynamic-import'
                        ]
                    }
                }
            }
        ]
    },
    plugins: [
        // 所有模块自动引入$
        // 所有模块都打包了$
        new webpack.ProvidePlugin({
            '$': 'jquery'
        }),
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true
            },
        }),
    ]
}